<template>
  <Layout style="height:100%"
          class="main">
    <Sider hide-trigger
           collapsible
           :width="256"
           :collapsed-width="64"
           v-model="collapsed"
           class="left-sider"
           :style="{overflow: 'hidden'}">
      <side-menu accordion
                 ref="sideMenu"
                 :active-name="$route.name"
                 :collapsed="collapsed"
                 @on-select="turnToPage"
                 :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <img v-show="!collapsed"
               :src="maxLogo"
               key="max-logo" />
          <img v-show="collapsed"
               :src="minLogo"
               key="min-logo" />
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con"
              v-if="this.$route.name !== 'set-expo' && this.$route.name !== 'set-up'"
              style="height: 55px;line-height: 55px;">
        <div class="clearfix">
          <p style="float: left;font-size: 16px;color:#333;">{{this.$route.meta.title}}</p>
          <div style="float: right;margin-right: 20px;">
            <p style="float: left;font-size: 16px;color:#333;margin-right: 15px;">登录名：{{userName}}</p>
            <user :user-avator="userAvator" />
          </div>
        </div>
      </Header>
      <Layout class="main-layout-con">
        <Content class="content-wrapper" style="padding: 18px!important">
          <router-view :key="$route.fullPath"></router-view>
        </Content>
      </Layout>
    </Layout>
  </Layout>
</template>
<script>
import { budgetAuditCount } from '@/api/main'
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import routers from '@/router/routers'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import { mapMutations, mapActions } from 'vuex'
import { getNewTagList, getNextRoute, routeEqual, getRoute } from '@/libs/util'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'

import './main.less'
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    User
  },
  data () {
    return {
      collapsed: false,
      minLogo,
      maxLogo,
      isFullscreen: false,
    }
  },
  computed: {
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userAvator () {
      return 'https://img.cyjxy.com/Fv89f7FungHlvJqp53H9iX4TBUcP.png'
    },
    zhName () {
      return localStorage.getItem('zh_name')
    },
    userName () {
      return this.$store.state.user.userName
    },
    cacheList () {
      return this.tagNavList.length
        ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name)
        : []
    },
    menuList () {
      for (var i = 0; i < (this.$store.getters.menuList.length); i++) {
        if (this.$store.getters.menuList[i]['name'] == 'exhibition_list') {
          this.$delete(this.$store.getters.menuList, i)
        }
      }
      return this.$store.getters.menuList
    },
    local () {
      return this.$store.state.app.local
    },
  },
  methods: {
    ...mapMutations(['setBreadCrumb', 'setTagNavList', 'addTag', 'setLocal']),
    ...mapActions(['handleLogin']),
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query,
      })
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
    handleCloseTag (res, type, route) {
      let user = JSON.parse(localStorage.getItem('user_admin'))
      if (this.tagNavList.length == 1 && route.name == user.first_access) {
        return false;
      }
      let openName = ''
      if (type === 'all') {
        this.turnToPage(user.first_access)
        openName = user.first_access
      } else if (routeEqual(this.$route, route)) {
        if (type === 'others') {
          openName = route.name
        } else {
          const nextRoute = getNextRoute(this.tagNavList, route)
          if (nextRoute != undefined) {
            this.$router.push(nextRoute)
            openName = nextRoute.name
          } else {
            this.turnToPage(user.first_access)
            openName = user.first_access
          }
        }
      }
      this.setTagNavList(res)
      this.$refs.sideMenu.updateOpenName(openName)
    },
    handleClick (item) {
      if (item.path) {
        return this.$router.push({
          path: item.path
        })
      }
      this.turnToPage(item)
    }
  },
  watch: {
    $route (newRoute) {
      this.setBreadCrumb(newRoute.matched)
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
    },
  },
  mounted () {
    let user = JSON.parse(localStorage.getItem('user_admin'))
		/**
		 * @description 初始化设置面包屑导航和标签导航
		 */
    this.setTagNavList()
    //console.log(this.tagNavList)
    if (!this.tagNavList.length) {
      let user = JSON.parse(localStorage.getItem('user_admin'))
      let res = getRoute(user.role, user.first_access, routers)
      this.addTag({
        route: res
      })
    }
    this.setBreadCrumb(this.$route.matched)
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
  },
}
</script>
